<template>
  <el-form ref="form" label-position="right" :model="form" :rules="rulesUnit" label-suffix="：" label-width="120px">
    <el-form-item label="单位名称" prop="platformName">
      <el-input v-model="form.platformName" placeholder="输入单位名称" :maxlength="50"></el-input>
    </el-form-item>
    <el-form-item label="单位类型" prop="platformType">
      <el-select v-model="form.platformType" placeholder="选择单位类型">
        <el-option
          v-for="item in EnumUnitTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属行政区" prop="region">
      <el-cascader :props="propsCascader" v-model="form.region" filterable change-on-select clearable></el-cascader>
    </el-form-item>
    <el-form-item label="管辖类型" v-if="form.platformType === 1" prop="scopeList">
      <el-select v-model="form.scopeList" multiple  placeholder="选择管辖道路类型">
        <el-option
          v-for="item in EnumRoadTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>
    <div class="tip">
      <p>请提供公司营业执照,支持jpg、png、gif、jpeg格式的图片</p>
    </div>
    <upload-img v-model="form.voucherList" ></upload-img>
  </el-form>
</template>

<script>
import {provinceList, cityList, areaList} from '@/services/model/common'
import UploadImg from "./upload-img";

export default {
  props: ['value', 'queryDictData'],
  components: {UploadImg},
  data() {
    return {
      propsCascader: {
        lazy: true,
        label: 'name',
        value: 'code',
        lazyLoad(node, resolve) {
          const {level, data} = node
          if (level === 0) {
            provinceList().then(res => {
              const {data} = res
              resolve(data)
            })
          } else if (level === 1) {
            cityList({provinceCode: data.code}).then(res => {
              const {data} = res
              resolve(data)
            })
          } else if (level === 2) {
            areaList({cityCode: data.code}).then(res => {
              const data = res.data.map(x => ({...x, leaf: true}))
              resolve(data)
            })
          } else {
            resolve([])
          }
        }
      },
      // 单位类型
      EnumUnitTypeList: [],
      EnumRoadTypeList:[],
      // 单位信息表单 校验规则
      rulesUnit: {
        platformName: {required: true, message: '请输入单位名称'},
        platformType: {required: true, message: '请选择单位类型'},
        region: {required: true, message: '请选择行政区'}
      },
    }
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    // 图片必填验证
    checkImg() {
      if (!this.form.voucherList?.length) {
        this.$message.error('请上传证明材料')
        return false
      }
      return true
    },
    // 内部表单校验
    _validatorForm() {
      if(this.form.platformType === 1){
        this.rulesUnit.scopeList = {required: true, message: '请选择管辖道路类型'}
      }else{
        this.rulesUnit.scopeList = {}
      }
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && this.checkImg() && resolve()
        })
      })
    },
  },
  created() {
    // 查询单位类型 并默认设置第一个值
    this.queryDictData('EnumUnitType').then(res => {
      let list = []
      // 隐藏设备厂家选项
      res.map(x => {
        if (x.code != 3) {
          list.push(x)
        }
      })
      this.EnumUnitTypeList = list
      if (!this.form.platformType) this.$set(this.form, 'platformType', res[0]?.code)
    })
    // 获取审查单位管辖的道路类型
    this.queryDictData('EnumRoadType').then(res => {
      this.EnumRoadTypeList = res
      // if (!this.form.scope) this.$set(this.form, 'scope', res[0]?.code)
    })
  },
  mounted() {
    this.form = {}
  }
}
</script>

<style>
  .tip {
    font-size: 13px;
    color: #999;
    margin-left: 25px;
    margin-bottom: 20px;

  }
 .tip p {
    line-height: 26px;
  }


</style>
